<template>
  <div>
    <el-table :data="users" style="width: 100%">
      <el-table-column prop="id" label="ID" width="80"></el-table-column>
      <el-table-column prop="username" label="用户名"></el-table-column>
      <el-table-column prop="phone" label="电话"></el-table-column>
      <el-table-column prop="email" label="邮箱"></el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status === '1' ? 'success' : 'danger'">
            {{ scope.row.status === '1' ? '启用' : '禁用' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" @click="editUser(scope.row)">编辑</el-button>
          <el-button type="danger" icon="el-icon-delete" @click="deleteUser(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :visible.sync="dialogVisible" title="编辑用户信息">
      <el-form :model="formData" :rules="rules" ref="form">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="formData.username"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input v-model="formData.phone"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="formData.email"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="formData.status">
            <el-radio :label="1">启用</el-radio>
            <el-radio :label="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="submitForm">保存</el-button>
      </div>
    </el-dialog>
    <el-button type="primary" icon="el-icon-plus" @click="showAddDialog">新增</el-button>
    <el-button type="danger" icon="el-icon-delete" @click="logout">登出</el-button>
  </div>
</template>

<script>
import { mapActions } from 'vuex';
export default {
  
  data() {
    return {
      users: [
      { id: 1, username: '张三', phone: '13812345678', email: 'zhangsan@xxx.com', status: '启用' },
      { id: 2, username: '李四', phone: '13912345678', email: 'lisi@xxx.com', status: '停用' }

      ],
      dialogVisible: false,
      formData: {},
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入电话', trigger: 'blur' },
          { pattern: /^1\d{10}$/, message: '电话号码格式不正确', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
        ],
        tatus: [
    { required: true, message: '请选择状态', trigger: 'blur' }
  ]
}
}
},

mounted() {
this.fetchUsers();


},


methods: {
  logout(){
    this.$router.push('/')
  },

...mapActions(['fetchUsers', 'createUser', 'updateUser', 'deleteUser']),
showAddDialog() {
  this.formData = {};
  this.dialogVisible = true;
},

//实现从后端获取数据
fetchUsers(){
console.log('1')
this.$http.get('http://localhost:8990/user/all').then(res => {
            const info = res.data
            console.log(info)
            this.users = info.data
            
      
            //数据
})
},
editUser(user) {
  this.formData = { ...user };
  this.dialogVisible = true;
},
submitForm() {
this.$refs.form.validate(valid => {
  if (valid) {
      if (this.formData.id) {
          this.updateUser(this.formData).then(() => {
          this.dialogVisible = false;
          this.fetchUsers();
});
} 
else {
  this.createUser(this.formData).then(() => {
  this.dialogVisible = false;
  this.fetchUsers();
});
}
} 
else {
return false;
}
});
},
cancel() {
this.dialogVisible = false;
}
}
}
</script>   

<style scoped>
/* 这里可以定义一些组件样式 */
</style>
